import React, { Component } from 'react'

class Home extends Component {
    state = {
        count: 1000,
        num: 888,
        arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        flag: true
    }

    fn = () => {
        // 在react中修改state中数据  this.setState()
        // this.setState(修改的数据，callback)

        // Object.assign  对象合并
        this.setState({
            flag: false
        }, () => {
            console.log(this.state.flag)
        })

        
        // this.setState 同步还是异步(时而同步，时而异步)
        // 如果使用合成事件  他就是异步
        // 如果是原生事件  他就是同步
    }

    render() {
        const { count, num, arr, flag } = this.state
        // console.log(flag)
        return <div>
            {/* react中循环的方式 v-for */}
            {/* <ul>
                {
                    arr.map((item, index) => {
                        return <li key = { index }>
                            { item }
                        </li>
                    })
                }
            </ul> */}
            {/* react中显示隐藏的方式 v-show */}
            {/* <h2 className = { flag? 'block': 'none' }>我是标题</h2>
            <button>点我</button> */}

             {/* react中显示隐藏的方式 v-if */}
             
             {/* {
                 flag? <h2>我是标题</h2>: <></>
             } */}

             {/* react中添加事件(合成事件) */}
             <h2 className = { flag? 'block': 'none' }>我是标题</h2>
             <button onClick = { () => {
                this.fn()
             } }>点我</button>
             
        </div>
    }
}

export default Home

